<template>
  <!-- 包含轮播图的容器，动态设置样式 -->
  <div :style="containerStyle">
    <!-- Element UI 的 Carousel 组件，点击触发轮播，设置高度 -->
    <el-carousel trigger="click" :height="carouselHeight">
      <!-- 遍历数据数组，生成 Carousel 项 -->
      <el-carousel-item v-for="item in data" :key="item">
        <!-- 显示图片 -->
        <el-image class="image" :src="item" fit="" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  name: 'Carousel', // 组件名
  props: {
    data: {
      type: Array, // 传入的数据类型为数组
      required: true // 必须传入
    }
  },
  data() {
    return {
      carouselHeight: '400px' // 默认的轮播图高度
    };
  },
  computed: {
    // 动态计算容器的样式
    containerStyle() {
      return {
        width: '100%' // 容器宽度为 100%
      };
    }
  },
  mounted() {
    // 组件挂载后更新高度，并监听窗口大小变化事件
    this.updateHeight();
    window.addEventListener('resize', this.updateHeight);
  },
  beforeUnmount() {
    // 组件卸载前移除窗口大小变化事件监听
    window.removeEventListener('resize', this.updateHeight);
  },
  methods: {
    // 更新轮播图高度的方法
    updateHeight() {
      const w = window.innerWidth; // 获取窗口宽度
      let h = 270; // 默认高度
      if (w > 1180) {
        h = 400; // 如果窗口宽度大于 1180，设置高度为 400
      } else {
        h = 0.22 * w; // 否则按比例设置高度
      }
      this.carouselHeight = h + 'px'; // 更新轮播图高度
    }
  }
};
</script>

<style scoped>
/* 图片样式，宽度为 100% */
.image{
  width: 100%;
}
/* 轮播图容器样式，高度自动 */
.el-carousel__container {
  height: auto;
}
/* 块元素样式 */
.block {
  box-sizing: border-box;
  vertical-align: top;
}
/* 最后一个块元素样式，去掉右边框 */
.block:last-child {
  border-right: none;
}
/* 示例文本样式 */
.demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>
